<template>
	<view>
		<u-popup :round="10" :show="show" :safeAreaInsetBottom="false" mode="center">
			<view class="loginoutPop">
				<view class="title">{{title}}</view>
				<view class="" style="text-align: center;" v-if="childs.length<=1">
					<view class="avatar">
						<rf-avatar :avatarUrl="childs[0].headSculpture" :gender="childs[0].childSex"></rf-avatar>
					</view>
					<view class="desc">{{childs[0].childName}}</view>
				</view>
				<view v-else style="display: flex; flex-direction: column;align-items: center;">
					<view class="avatar"
						style="background-color: #eaeaea; width: 110rpx; height: 110rpx; padding: 3rpx; border-radius: 5rpx;">
						<u-grid :col="3" :border="false">
							<u-grid-item v-for="(item, index) in childs.slice(0,9)" :key="index">
								<image :src="item.headSculpture" mode="aspectFit"
									style="width: 35rpx; height: 35rpx; padding: 3rpx;">
								</image>
							</u-grid-item>
						</u-grid>
					</view>
					<view class="desc">{{childNames}}</view>
				</view>
				<view style="color: #3A3D4B;font-size: 32rpx;font-weight: 500;">请输入共管人ID</view>
				<view class="input">
					<u-input v-model="shareId" type="number" :border="border" placeholder="请输入"
						customStyle="height: 88rpx; line-height: 88rpx;" />
				</view>
				<view class="loginoutBtn">
					<view class="btn" @click="close">{{cancelText}}</view>
					<view class="btn confirm" @click="confirm">{{confirmText}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "rf-alertJoint",
		props: {
			show: {
				type: Boolean,
				required: true,
				default: false,
			},
			title: {
				type: String,
				required: true,
				default: "创建共同管理人"
			},
			childs: {
				type: Array,
				required: true,
				default: []
			},
			desc: {
				type: String,
				required: true,
				default: ""
			},
			cancelText: {
				type: String,
				required: true,
				default: "取消"
			},
			confirmText: {
				type: String,
				required: true,
				default: "确定共管"
			}
		},
		data() {
			return {
				confirmShow: false,
				shareId: "",
			};
		},
		watch: {
			show(val) {
				console.log("----=-=-=-=-");
				console.log(val);
			},

			shareId(val) {
				console.log(val);
				this.$emit("input", val)
			}
		},
		computed: {
			childNames() {
				var names = this.childs.slice(0, 3).map(function(obj) {
					console.log(obj.childName);
					return obj.childName;
				}).join("、");
				return names + "等" + this.childs.length + "人";
			}
		},
		methods: {
			confirm() {
				this.$emit('confirm', true)
			},
			close() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss">
	.loginoutPop {
		width: 70vw;
		// height: 320rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		font-size: 28rpx;
		z-index: 999;

		.title {
			font-size: 32rpx;
			font-weight: 600;
			margin-top: 30rpx;
		}

		.avatar {
			margin-top: 30rpx;
		}

		.desc {

			margin: 20rpx auto 40rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #3A3D4B;
			text-align: center;
		}

		.input {
			background-color: #F4F7F9;
			border-radius: 8rpx;
			height: 88rpx;
			margin: 20rpx auto 20rpx;
			width: 80%;
		}

		.loginoutBtn {
			display: flex;
			margin-bottom: 30rpx;

			.btn {
				width: 200rpx;
				height: 72rpx;
				color: #58C866;
				background: #FFFFFF;
				border-radius: 36rpx;
				border: 2rpx solid #58C866;
				margin: 0 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.confirm {
				background-color: #58C866;
				color: #fff;
			}
		}
	}
</style>